<template>
  <div>
    <el-select
      @keyup.space.enter.stop.native
      :disabled="disabled"
      :allow-create="allowCreate"
      style="width: 100%"
      v-model="val"
      filterable
      :remote="remote"
      :value-key="keyName"
      placeholder="请输入关键词查询"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="handleSelect"
      @focus.once="onfocus"
      :clearable="clearable">
      <el-option v-for="item in restaurants" :key="item.id" :label="item[keyName]" :value="item"></el-option>
    </el-select>
  </div>
</template>

<script>
import BaseService from '@/api/base/base'
export default {
  name: 'HdSearchInput',
  data() {
    return {
      restaurants: [],
      val: '',
      loading: false,
      baseService: '',
      remote: true,
    }
  },
  props: {
    modulePath: {
      type: String,
      default: '',
    },
    moduleChildPath: {
      type: String,
      default: '',
    },
    keyName: {
      type: String,
      default: '',
    },
    value: '',
    initQuery: {
      type: Object,
      default: null,
    },
    initParams: {
      type: Object,
      default() {
        return {}
      },
    },
    disabled: false,
    options: {
      type: Array,
      default: null,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    allowCreate: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    if (this.modulePath == '') {
      this.baseService = new BaseService(this.moduleChildPath)
    } else {
      this.baseService = new BaseService(this.modulePath)
    }
    //this.initQ(this.value)
    // this.initO(this.value)
    if (this.options) {
      this.remote = false
      this.restaurants = this.options
    }
    this.init(this.value)
  },
  watch: {
    value: 'init',
    initQuery: 'initQ',
    options: 'initO',
  },
  methods: {
    onfocus() {
      if (this.options) return
      if (this.initQuery) {
        this.getList(this.initQuery).then((res) => {
          this.remote = res
        })
      } else {
        this.remoteMethod({})
      }
    },
    init(val) {
      this.val = val
      if ((this.options && this.options.length > 0) || !val) {
        return
      }
      if (!this.allowCreate) {
        if (this.restaurants === undefined || this.restaurants.length === 0 || !this.restaurants.some((item) => item[this.keyName] === val)) {
          let opt = {}
          opt[this.keyName] = val
          this.restaurants = [opt]
        }
      }
    },
    initQ(val, old) {
      if (this.initQuery && JSON.stringify(val) != JSON.stringify(old)) {
        this.getList(this.initQuery).then((res) => {
          this.remote = res
        })
      }
    },
    initO(newvalue, oldvalue) {
      if (this.options) {
        this.remote = false
        this.restaurants = this.options
        // if (!this.options.some((item) => item[this.keyName] === this.value)) {
        this.val = undefined
        this.$emit('input', this.val)
        // }
      }
    },
    getList(res) {
      if (this.moduleChildPath != '') {
        this.loading = true
        return this.baseService.getListChild(res).then((response) => {
          this.restaurants = response.data
          this.loading = false
          this.remote = false
          return false
        })
      } else {
        this.loading = true
        return this.baseService.getList(res).then((response) => {
          this.restaurants = response.rows
          this.loading = false
          return response.total > this.restaurants.length
        })
      }
    },
    remoteMethod(query) {
      if (this.options) {
        this.restaurants = this.options
        return
      }
      if (query !== '') {
        let q = this.initParams
        q[this.keyName] = query
        this.loading = true
        this.getList(q)
      } else {
        this.restaurants = []
      }
    },
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root
      var name = parent.$options.componentName

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent

        if (parent) {
          name = parent.$options.componentName
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params))
      }
    },
    handleSelect(res) {
      if (this.allowCreate) {
        this.$emit('input', res)
      } else {
        this.$emit('input', res[this.keyName])
      }

      this.$emit('change', res)
      setTimeout(() => {
        this.dispatch('ElFormItem', 'el.form.change', res[this.keyName])
      })
    },
  },
}
</script>

<style></style>
